<template>
  <view class="con">
    <u-navbar auto-back title="分享推广" title-style="color:#fff" @left-click="goBack" left-icon-color="#fff" bgColor="background:rgba(0,0,0,0)"></u-navbar>
    <view class="info">
      <view class="bt">我的邀请码</view>
      <image :src="info?.avatar" mode="" class="tx"></image>
      <view class="name">{{ info?.nickName }}</view>
      <image class="ewm" :src="qrCode" mode=""></image>
      <view class="yqmBox">
        <view class="box">
          邀请码 <text>{{ info?.invitationCode }}</text>
        </view>
      </view>
    </view>
    <view class="buttomBox">
      <u-button color="#1676fd" text="立即邀请" shape="circle" @click="shareImg"></u-button>
    </view>
    <SharePainter :info="qrCode" ref="poterCom" />
  </view>
</template>

<script setup lang="ts">
import { getQrCode } from "@/api/my";
import { onMounted, ref } from "vue";
import { goBack } from "@/utils/commonFn";
import SharePainter from "@/components/sharePainter.vue";
const info = ref<myTypes.userInfo>();
info.value = uni.getStorageSync("userInfo");
const qrCode = ref("");
const poterCom = ref();
onMounted(async () => {
  const res = await getQrCode();
  qrCode.value = res.data;
});
// 行为
const shareImg = () => {
  poterCom.value.save();
};
onMounted(async () => {});
</script>

<style lang="less" scoped>
.con {
  background: linear-gradient(180deg, #1676fd 0%, rgba(49, 174, 255, 0.1) 84%, rgba(49, 174, 255, 0) 100%);
  padding-top: 60rpx;
}
.info {
  position: relative;
  z-index: 99;
  background: url("../../static/my/yqbg.png") no-repeat;
  background-size: 100%;
  text-align: center;
  margin-top: 95rpx;
  padding-top: 65rpx;
  .bt {
    font-size: 32rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #1676fd;
    line-height: 44rpx;
  }
  .tx {
    width: 160rpx;
    height: 160rpx;
    border: 4rpx solid #ffffff;
    border-radius: 50%;
    margin-top: 42rpx;
  }
  .name {
    font-size: 36rpx;
    font-weight: 600;
    color: #1e1e1e;
    line-height: 50rpx;
    margin-top: 8rpx;
  }
  .ewm {
    width: 360rpx;
    height: 360rpx;
    margin-top: 80rpx;
  }
  .yqmBox {
    margin-top: 150rpx;
    padding-bottom: 300rpx;
    font-size: 32rpx;
    color: #666669;
    line-height: 44rpx;
    display: flex;
    justify-content: center;
    text {
      color: #333333;
    }
    .box {
      background: #f7f7f7;
      padding: 18rpx 40rpx;
    }
  }
}
</style>
